import 'package:flutter/material.dart';

class Test_SliverGrid extends StatelessWidget {
  const Test_SliverGrid({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SliverGrid 示例')),
      body: CustomScrollView(
        slivers: [
          // 添加一个顶部标题（可选）
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                '网格列表',
                style: Theme.of(context).textTheme.headlineLarge,
              ),
            ),
          ),

          // 网格布局部分
          SliverGrid(
            // 网格布局规则
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, // 每行显示两个
              mainAxisSpacing: 10, // 纵向间距
              crossAxisSpacing: 10, // 横向间距
              childAspectRatio: 1.0, // 宽高比
            ),

            // 内容构建器
            delegate: SliverChildBuilderDelegate(
                  (context, index) {
                return Container(
                  color: Colors.primaries[index % Colors.primaries.length],
                  child: Center(
                    child: Text(
                      'Item $index',
                      style: const TextStyle(color: Colors.white, fontSize: 20),
                    ),
                  ),
                );
              },
              childCount: 10, // 网格项数量
            ),
          ),
        ],
      ),
    );
  }
}
